var grids;
var context;

const SIDELEN=40;
const MARGIN=5;

const COLORS = {
    "0": "#FFFFFF",
    "1": "#000000"
}
export default {
    data: {
        currentSteps:0,
        isShow: false
    },
    onInit() {
        grids=[[0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0],
               [0, 0, 0, 0, 0, 0, 0]];

        this.initGrids();
    },
    initGrids(){
        let array = [];
        for (let row = 0; row < 7; row++) {
            for (let column = 0; column < 7; column++) {
                array.push([row, column]);
            }
        }
        for (let i = 0; i < 20; i++){
            let randomIndex = Math.floor(Math.random() * array.length);
            let row = array[randomIndex][0];
            let column = array[randomIndex][1];
            this.changeOneGrids(row,column);
        }
    },
    onReady(){
        context=this.$refs.canvas.getContext('2d');
    },
    onShow(){
        this.drawGrids();
    },
    drawGrids(){
        for (let row = 0 ;row < 7 ;row++){
            for (let column = 0; column < 7;column++){
                let gridStr = grids[row][column].toString();

                context.fillStyle = COLORS[gridStr];
                let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
                let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
                context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
            }
        }
    },
    change(x,y){
        if(this.isShow==false){
            if(grids[x][y] == 0){
                grids[x][y] = 1;
            }else{
                grids[x][y] = 0;
            }
        }
    },
    changeOneGrids(x,y){
        if(x>-1 && y>-1 && x<7 && y<7){
            this.change(x,y);
        }
        if(x+1>-1 && y>-1 && x+1<7 && y<7){
            this.change(x+1,y);
        }
        if(x-1>-1 && y>-1 && x-1<7 && y<7){
            this.change(x-1,y);
        }
        if(x>-1 && y+1>-1 && x<7 && y+1<7){
            this.change(x,y+1);
        }
        if(x>-1 && y-1>-1 && x<7 && y-1<7){
            this.change(x,y-1);
        }
        this.drawGrids();

        if(this.isShow==false){
            this.currentSteps+=1;;
        }
        if(this.gameover()){
            this.isShow=true;
        }
    },
    gameover(){
        for (let row = 0 ;row < 7 ;row++){
            for (let column = 0; column < 7;column++){
                if (grids[row][column]==1){
                    return false;
                }
            }
        }
        return true;
    },
    restartGame(){
        this.onInit();
        this.drawGrids();
        this.isShow = false;
        this.currentSteps = 0;
    },
    getgrid1(){
        this.changeOneGrids(0,0);
    },
    getgrid2(){
        this.changeOneGrids(0,1);
    },
    getgrid3(){
        this.changeOneGrids(0,2);
    },
    getgrid4(){
        this.changeOneGrids(0,3);
    },
    getgrid5(){
        this.changeOneGrids(0,4);
    },
    getgrid6(){
        this.changeOneGrids(0,5);
    },
    getgrid7(){
        this.changeOneGrids(0,6);
    },
    getgrid8(){
        this.changeOneGrids(1,0);
    },
    getgrid9(){
        this.changeOneGrids(1,1);
    },
    getgrid10(){
        this.changeOneGrids(1,2);
    },
    getgrid11(){
        this.changeOneGrids(1,3);
    },
    getgrid12(){
        this.changeOneGrids(1,4);
    },
    getgrid13(){
        this.changeOneGrids(1,5);
    },
    getgrid14(){
        this.changeOneGrids(1,6);
    },
    getgrid15(){
        this.changeOneGrids(2,0);
    },
    getgrid16(){
        this.changeOneGrids(2,1);
    },
    getgrid17(){
        this.changeOneGrids(2,2);
    },
    getgrid18(){
        this.changeOneGrids(2,3);
    },
    getgrid19(){
        this.changeOneGrids(2,4);
    },
    getgrid20(){
        this.changeOneGrids(2,5);
    },
    getgrid21(){
        this.changeOneGrids(2,6);
    },
    getgrid22(){
        this.changeOneGrids(3,0);
    },
    getgrid23(){
        this.changeOneGrids(3,1);
    },
    getgrid24(){
        this.changeOneGrids(3,2);
    },
    getgrid25(){
        this.changeOneGrids(3,3);
    },
    getgrid26(){
        this.changeOneGrids(3,4);
    },
    getgrid27(){
        this.changeOneGrids(3,5);
    },
    getgrid28(){
        this.changeOneGrids(3,6);
    },
    getgrid29(){
        this.changeOneGrids(4,0);
    },
    getgrid30(){
        this.changeOneGrids(4,1);
    },
    getgrid31(){
        this.changeOneGrids(4,2);
    },
    getgrid32(){
        this.changeOneGrids(4,3);
    },
    getgrid33(){
        this.changeOneGrids(4,4);
    },
    getgrid34(){
        this.changeOneGrids(4,5);
    },
    getgrid35(){
        this.changeOneGrids(4,6);
    },
    getgrid36(){
        this.changeOneGrids(5,0);
    },
    getgrid37(){
        this.changeOneGrids(5,1);
    },
    getgrid38(){
        this.changeOneGrids(5,2);
    },
    getgrid39(){
        this.changeOneGrids(5,3);
    },
    getgrid40(){
        this.changeOneGrids(5,4);
    },
    getgrid41(){
        this.changeOneGrids(5,5);
    },
    getgrid42(){
        this.changeOneGrids(5,6);
    },
    getgrid43(){
        this.changeOneGrids(6,0);
    },
    getgrid44(){
        this.changeOneGrids(6,1);
    },
    getgrid45(){
        this.changeOneGrids(6,2);
    },
    getgrid46(){
        this.changeOneGrids(6,3);
    },
    getgrid47(){
        this.changeOneGrids(6,4);
    },
    getgrid48(){
        this.changeOneGrids(6,5);
    },
    getgrid49(){
        this.changeOneGrids(6,6);
    }
};